.
<template>
  <vab-card>
    <template #header>
      <div class="flex_sb">
        <span class="leve2_title">收货确认</span>
        <VabAuthButton
          type="primary"
          title="确认收货"
          :disabled="isDisabled"
          @click="handleConfirm()"
        />
      </div>
    </template>
    <template #default>
      <el-form
        v-loading="loading"
        ref="baseFormRef"
        :model="baseFrom"
        label-position="left"
        label-width="100px"
      >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="收货备注" prop="receipt_mark">
              <VabInputForm
                v-if="!isDisabled"
                v-model="baseFrom.receipt_mark"
              />
              <span v-else>{{ baseFrom.receipt_mark || '' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签收单上传" prop="receipt_form_img">
              <VabUploadFile
                title="上传"
                v-if="!isDisabled"
                ref="vabUploadFileRef"
                :accept="accept"
                tip="支持word、Excel、PDF、JPG、JPEG、PNG上传(最多上传一份)"
                :style="{
                  width: '100%',
                  height: '30px',
                  'font-size': '14px',
                }"
                @expose-path="
                  (path: string) => {
                    baseFrom.receipt_form_img = path
                  }
                "
              />
              <aside v-else class="flex">
                <span
                  class="icon"
                  v-for="(item, i) in baseFrom.receipt_form_img"
                  :key="i"
                  @click="handlePreview(item)"
                >
                  <vab-icon icon="file-text-line" />
                  {{ item.name }}
                </span>
              </aside>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- pdf预览 -->
      <VabPdf :source="pdfPreviewUrl" />
    </template>
  </vab-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { gp } from '~/library/plugins/vab'
  import { orderConfirmReceipt } from '~/src/api/dms/home/order'
  import VabPdf from '/@/plugins/VabPdf'
  import { StrSplit } from '~/src/utils/utils'
  /**
   * @var
   */
  const vabUploadFileRef = ref()
  const baseFrom = ref<any>({
    receipt_mark: '',
    receipt_form_img: '',
  })
  const loading = ref(false)
  const accept = '.docx,.doc,.xls,.xlsx,.pdf,.jpg,.png,.jpeg'
  const baseFormRef = ref()
  const orderNo = ref<any>('')
  const isDisabled = ref(false)

  const pdfPreviewUrl = ref<any>('')

  /**
   * 确认收货
   */
  const emit = defineEmits(['refresh'])

  // 确认
  const handleConfirm = () => {
    const { list } = vabUploadFileRef.value
    baseFrom.value = {
      ...baseFrom.value,
      order_no: orderNo.value,
      receipt_form_img: JSON.stringify([
        {
          response: list[0]?.url || '',
          name: list[0]?.name || '',
        },
      ]),
    }

    orderConfirmReceipt({
      ...baseFrom.value,
    }).then((res) => {
      gp.$baseMessage('确认收货成功', 'success')
      emit('refresh')
    })
  }

  // 预览
  const handlePreview = ({ response, name }: any) => {
    const suffix = StrSplit(name, '.', 1)

    if (suffix == 'pdf') {
      pdfPreviewUrl.value = response
      return
    }

    window.open(response)
  }

  // 获取更新数据
  const getUpdateData = ({
    order_no,
    receipt_mark,
    receipt_form_img,
    order_status,
  }: any) => {
    orderNo.value = order_no
    // 是否禁用确认收货
    isDisabled.value = order_status == 140 ? false : true

    // 140
    baseFrom.value = {
      receipt_mark: receipt_mark || '',
      receipt_form_img: receipt_form_img ? JSON.parse(receipt_form_img) : [],
    }

    console.log(baseFrom.value, 'baseFrom.value')
  }

  defineExpose({
    getUpdateData,
  })
</script>
<style lang="scss" scoped>
  @import '../index.scss';
  .icon {
    color: #54b3f6;
    cursor: pointer;
  }
</style>
